<template>
  <div class="input-container">
    <!-- 第一行，按钮组、日期选择器和搜索框 -->
    <InputButton :flag="false" />
    <!-- 第二行，采购订单表 -->
    <el-card style="margin-top: 5px">
      <el-table
        border
        :data="list"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <!-- 表格字段 -->
        <el-table-column type="index" align="center" />
        <el-table-column
          prop="id"
          label="关联单号"
          width="165"
          align="center"
        />
        <el-table-column
          prop="date"
          label="采购日期"
          sortable
          width="110"
          align="center"
        />
        <el-table-column
          prop="inputDate"
          label="入库日期"
          sortable
          width="110"
          align="center"
        />
        <el-table-column
          prop="sum"
          label="货物总数"
          width="80"
          align="center"
        />
        <el-table-column prop="flag" label="入库数" width="80" align="center">
          <template slot-scope="{ row }">
            {{ getInputNum(row.porders) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="salesperson"
          label="采购员"
          width="80"
          align="center"
        />
        <el-table-column
          prop="keeper"
          label="入库员"
          width="80"
          align="center"
        />
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="
                row.flag === 0 ? 'warning' : row.flag === 2 ? 'success' : ''
              "
            >{{
              row.flag === 0 ? "待入库" : row.flag === 2 ? "已入库" : "入库中"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        ><template slot-scope="{ row }">
          <el-button
            :v-show="row.sum !== 20"
            type="primary"
            size="small"
            @click="showDialog(row)"
          >操作</el-button>
        </template></el-table-column>
      </el-table>
    </el-card>

    <!-- 弹窗 -->
    <Dialog ref="dialog" @get="get" />
  </div>
</template>

<script>
// 引入组件
import InputButton from '@/components/InputButton/index.vue'
import Dialog from '@/views/task/input/Dialog/index.vue'

export default {
  name: 'Input',
  components: {
    InputButton,
    Dialog
  },
  data() {
    return {
      // 采购订单列表
      list: []
    }
  },
  mounted() {
    // 获取采购订单信息
    this.get()
  },
  methods: {
    // 查看订单详情
    showDialog(row) {
      this.$refs['dialog'].dialogVisible = true
      this.$nextTick(function() {
        // 子组件状态标记（true：添加，false：查看）
        this.$refs['dialog'].flag = false
        // 共享数据到子组件
        this.$refs['dialog'].id = row.id
        this.$refs['dialog'].inputId = row.inputId
        this.$refs['dialog'].date = row.date
        this.$refs['dialog'].porders = row.porders
      })
    },
    // 取消入库
    cancel(row) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelItem(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取采购订单
    async get() {
      const response = await this.$API.input.get()
      if (response.code === 200) {
        this.list = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 获取入库数目
    getInputNum(porders) {
      let sum = 0
      porders.forEach(pOrder => {
        sum += pOrder.flag
      })
      return sum
    }
  }
}
</script>

<style lang='scss' scoped>
.input {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
